<template>
  <el-dialog
      title="审核跟踪详情"
      v-model="dialogVisible"
      width="800px"
      :before-close="handleClose"
  >
    <!-- 商品信息部分（网格布局） -->
    <div class="grid-container">
      <div class="grid-item">商品ID：</div>
      <div class="grid-item">{{ formData.goodsId }}</div>

      <div class="grid-item">商品名称：</div>
      <div class="grid-item">{{ formData.goodsName }}</div>

      <div class="grid-item">商品库存：</div>
      <div class="grid-item">{{ formData.goodsStock }}</div>

      <div class="grid-item">原始价格：</div>
      <div class="grid-item">
        市场价: {{ formData.originalMarketPrice }}<br />
        商城价: {{ formData.originalMallPrice }}
      </div>

      <!-- 调价幅度：始终显示（即使为0） -->
      <div class="grid-item">调价幅度：</div>
      <div class="grid-item">
        市场价: {{ formData.adjustMarketPrice }}<br />
        商城价: {{ formData.adjustShoppingPrice }}
      </div>

      <div class="grid-item">希望生效时间：</div>
      <div class="grid-item">{{ formData.beginTime }}</div>

      <div class="grid-item">希望失效时间：</div>
      <div class="grid-item">{{ formData.endTime }}</div>

      <div class="grid-item">调整原因：</div>
      <div class="grid-item">{{ formData.reason }}</div>

      <div class="grid-item">备注：</div>
      <div class="grid-item">{{ formData.remark }}</div>
    </div>

    <!-- 审核记录部分：去掉表格，用卡片+{{}}直接渲染 -->
    <div style="margin-top: 20px;">
      <h3 class="audit-title">审核记录</h3>
      <!-- 审核记录卡片 -->
      <div class="audit-record-card">
        <div class="audit-record-item">
          <span class="audit-label">审批人：</span>
          <span class="audit-value">{{ auditRecord.checkName || '无' }}</span>
        </div>
        <div class="audit-record-item">
          <span class="audit-label">审批时间：</span>
          <span class="audit-value">{{ auditRecord.checkTime ? formatRowDate2(auditRecord.checkTime) : '无' }}</span>
        </div>
        <div class="audit-record-item">
          <span class="audit-label">审批状态：</span>
          <span
              class="audit-value"
              :class="{
              'status-passed': auditRecord.checkAnswer === 1,
              'status-rejected': auditRecord.checkAnswer === 0
            }"
          >
            {{ auditRecord.checkAnswer === 1 ? '通过' : auditRecord.checkAnswer === 0 ? '未通过' : '无' }}
          </span>
        </div>
        <div class="audit-record-item">
          <span class="audit-label">审批意见：</span>
          <span class="audit-value">{{ auditRecord.checkRespsonse || '无' }}</span>
        </div>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">返回</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import api from '@/utils/request.js';

const dialogVisible = ref(false);
const formData = ref({
  goodsId: '',
  goodsName: '',
  goodsStock: '',
  originalMarketPrice: '',
  originalMallPrice: '',
  adjustMarketPrice: '',
  adjustShoppingPrice: '',
  beginTime: '',
  endTime: '',
  reason: '',
  remark: ''
});
// 审核记录：直接用对象接收（不用数组）
const auditRecord = ref({});

// 关闭对话框：清空审核记录
const handleClose = () => {
  dialogVisible.value = false;
  auditRecord.value = {};
};

// 时间格式化（商品信息用，无时分秒）
const formatRowDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}年${month}月${day}日`;
};

// 时间格式化（审核时间用，带时分秒）
const formatRowDate2 = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
};

// 打开对话框并加载数据
const openAuditTraceDialog = (rowData) => {
  // 映射商品基础数据
  formData.value = {
    goodsId: rowData.goodsId || '',
    goodsName: rowData.gname || '',
    goodsStock: rowData.stock || '',
    originalMarketPrice: rowData.oldMarketPrice || '',
    originalMallPrice: rowData.oldShopPrice || '',
    adjustMarketPrice: rowData.adjustMarketPrice || '',
    adjustShoppingPrice: rowData.adjustShoppingPrice || '',
    beginTime: rowData.beginTime ? formatRowDate(rowData.beginTime) : '',
    endTime: rowData.endTime ? formatRowDate(rowData.endTime) : '',
    reason: rowData.reason || '',
    remark: rowData.remark || ''
  };
  dialogVisible.value = true;

  // 向后端请求审核记录（直接用对象接收）
  const adjustId = rowData.id;
  api.get("check/getReport", { adjustId: adjustId }).then(res => {
    if (res.code === 200) {
      auditRecord.value = res.data; // 直接赋值对象，不用数组
    }
  });
};

defineExpose({
  openAuditTraceDialog
});
</script>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-auto-rows: auto;
  gap: 1px;
  background-color: #dcdcdc;
  padding: 1px;
  margin-bottom: 10px;
}

.grid-item {
  background-color: #fff;
  padding: 8px;
  word-break: break-all;
}

/* 审核记录标题样式 */
.audit-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 5px;
}

/* 审核记录卡片样式 */
.audit-record-card {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 15px;
  background-color: #fff;
}

/* 审核记录每一项样式 */
.audit-record-item {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
}

/* 审核记录标签（固定宽度+灰色） */
.audit-label {
  width: 80px;
  color: #666;
  margin-right: 10px;
}

/* 审核记录值 */
.audit-value {
  flex: 1;
  word-break: break-word;
}

/* 审批状态样式 */
.status-passed {
  color: #4caf50;
}
.status-rejected {
  color: #f44336;
}
</style>